<template>
  <div class="resource-manage">
    <div class="card-box basic-form">
      <div class="card-title">基础信息</div>
      <el-form ref="formData" class="form-wrap" size="small" :rules="rules" :model="formData">
        <el-form-item label="评估编号" prop="batch">
          <el-input v-halfCharCode v-model="formData.batch" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="评估日期" prop="assessDate">
          <el-date-picker v-model="formData.assessDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" @change="dateVerify('assessDate')"></el-date-picker>
        </el-form-item>
        <el-form-item label="有效日期" prop="validDate">
          <el-date-picker v-model="formData.validDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" @change="dateVerify('validDate')"></el-date-picker>
        </el-form-item>
        <el-form-item label="评估机构" prop="assessOrg">
          <el-autocomplete class="assessOrgInput" v-model="formData.assessOrg" :fetch-suggestions="querySearch" placeholder="请输入或选择评估机构" />
        </el-form-item>
      </el-form>
      <div class="card-title">
        物业信息
        <el-button size="small" type="primary" @click="selectRoom">添加物业</el-button>
      </div>
      <room-select ref="roomSelect" @completeSelect="completeSelect" :disabledArr="rentPrices.map(i=>i.roomId)" />
      <el-row>
        <el-col :span="24">
          <el-table :data="rentPrices" stripe>
            <el-table-column type="index" width="50" />
            <el-table-column label="物业名称" prop="propertyName" width="180">
              <template slot-scope="scope">
                <el-input v-halfCharCode v-model="scope.row.propertyName" :readonly="true" />
              </template>
            </el-table-column>
            <el-table-column prop="projectName" label="所属项目" width="180" />
            <el-table-column prop="buildingArea" label="建筑面积" width="180" />
            <el-table-column prop="price" label="市场评估租金单价（元/m²/月）" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" controls-position="right" v-only-number="{min:0,precision:2}" maxlength="15" />
              </template>
            </el-table-column>
            <el-table-column width="80" label="操作">
              <template slot-scope="scope">
                <el-link @click.stop="deleteRow(scope.$index)">删除</el-link>
              </template>
            </el-table-column>
            <el-table-column width="10" label>
              <template slot-scope="scope">
                <el-input v-halfCharCode type="hidden" v-model="scope.row.roomId" />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="card-title">其他附件</div>
      <el-row :gutter="20">
        <el-col>
          <p style="font-size: 14px;padding:20px 20px 0px;">
            评估资料
          </p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <div style="padding: 0 20px">
            <v-upload ref="myUpload" :busId="busId" modelType="rent-price" @onSuccess="onSuccess" @onError="onError" v-model="uploadFileList" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col align="right">
          <el-button @click="goBack">返回</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script src="./add.js"></script>
<style scoped lang="scss">
.el-row {
  padding: 5px;
}
.assessOrgInput {
  display: block;
  width: 100%;
}
.resource-manage {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 16px;
  padding: 24px 24px 0px;
  &:first-child {
    padding-top: 24px;
  }
  & + .resource-manage {
    padding-top: 0;
  }
}
</style>
